<template lang="">
  <div>
    <el-card class="box-card">
      <!-- 顶部搜索 -->
        <el-row :gutter="6">
          <el-col :span="22">
            <el-form ref="form" :model="searchForm" label-width="80px">
              <el-form-item label="活动时间">
                <el-col :span="6">
                  <el-date-picker type="datetime" placeholder="开始时间" v-model="searchForm.startTime" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="6">
                  <el-date-picker type="datetime" placeholder="结束时间" v-model="searchForm.endTime" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" @click="doSearch">搜索</el-button>
                </el-col>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="2">
            <el-button type="primary">添加</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="filterTableData"
          border
          style="width: 100%">

          <el-table-column
            label="序号"
            type="index"
            width="50">
          </el-table-column>

          <el-table-column
            prop="date"
            label="创建日期"
            width="180">
          </el-table-column>


          <el-table-column
            prop="type"
            label="收支类型"
            width="180">
          </el-table-column>

          <el-table-column
            prop="describe"
            label="收支描述">
          </el-table-column>

           <el-table-column
            prop="income"
            label="收入">
          </el-table-column>

           <el-table-column
            prop="expend"
            label="支出">
          </el-table-column>

           <el-table-column
            label="操作">
          </el-table-column>


        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="page"
          :page-sizes="[2,5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "FoudList",
  data() {
    return {
      //列表数据
      tableData: [],
      // filterTableData: [],
      //分页
      page: 1, //当前页
      pageSize: 5, //当前页条数
      //筛选
      searchForm: {
        startTime: "",
        endTime: "",
      },
    };
  },
  computed: {
    total() {
      return this.tableData.length;
    },
    //列表筛选
    filterTableData() {
      return this.tableData.filter((item, index) => {
        let start = (this.page - 1) * this.pageSize;
        let end = this.page * this.pageSize;
        return index >= start && index < end;
      });
    },
  },
  methods: {
    //执行搜索
    doSearch() {
      let start = this.searchForm.startTime.getTime(); //时间戳
      let end = this.searchForm.endTime.getTime(); //时间戳
      // console.log(start, end);
      this.tableData = this.tableData.filter((item) => {
        var stamp = new Date(item.date).getTime();
        return stamp >= start && stamp <= end;
      });
    },
    //改变当前页条数
    handleSizeChange(size) {
      this.pageSize = size;
    },
    //页码跳转
    handlePageChange(page) {
      this.page = page;
    },
  },
  async created() {
    //获取列表数据
    let { data: res } = await this.$http({ url: "/api/profiles" }).catch(
      (err) => err
    );
    this.tableData = res;
    // this.filterTableData = res;
  },
};
</script>
<style lang="less">
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>